---
title: 인증
description: 사용자 인증
---

# 인증

## 응용 프로그램에 인증된 액세스 제공

필요에 따라 사용자가 연결 과정에서 지갑으로 메시지에 서명하도록 요구하여 연결된 계정을 소유하고 있음을 입증하게 할 수 있으며, 이를 통해 응용 프로그램에 대한 특권을 가진 인증된 사용자 세션을 생성할 수 있습니다.

커스텀 백엔드와 메시지 형식에 [통합하는 것](/docs/custom-authentication)이 가능하긴 하지만, RainbowKit은 [Ethereum으로 로그인](https://login.xyz) 및 [NextAuth](https://next-auth.js.org)에 대해 일급 지원을 제공합니다.

### Ethereum과 NextAuth로 로그인 설정

#### 설치

`@rainbow-me/rainbowkit-siwe-next-auth` 패키지를 설치하세요.

```bash
npm install @rainbow-me/rainbowkit-siwe-next-auth
```

#### 프로바이더 설정

`App` 컴포넌트에서 `RainbowKitSiweNextAuthProvider`를 가져옵니다.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
```

`RainbowKitProvider`를 `RainbowKitSiweNextAuthProvider`로 래핑하고, 세션에 접근할 수 있도록 NextAuth의 `SessionProvider` 내에 중첩되어 있는지 확인하세요.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>;
  );
}
```

`RainbowKitSiweNextAuthProvider`가 있으면 사용자는 지갑을 연결한 후 메시지에 서명하여 인증하도록 요청받게 됩니다.

#### SIWE 메시지 옵션 사용자 정의

`RainbowKitSiweNextAuthProvider`의 `getSiweMessageOptions` prop에 함수를 전달하여 [SIWE 메시지 옵션](https://viem.sh/docs/siwe/utilities/createSiweMessage#parameters)을 사용자 정의할 수 있습니다.

이 함수는 새로운 메시지가 생성될 때마다 호출됩니다. 이 함수에서 반환된 옵션은 기본값에 병합됩니다.

```tsx
import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;
```

#### 세션 서버에 접근

사용자가 성공적으로 인증하면, 세션 토큰의 `sub` 속성 (토큰의 "subject", 즉 사용자)이 사용자의 주소가 될 것입니다.

또한, `getServerSideProps`를 통해 서버에서 해결된 세션 객체를 클라이언트로 전달하여 NextAuth가 클라이언트에서 다시 해석할 필요가 없게 할 수 있습니다.

예를 들면:

```tsx
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await getSession(context);
  const token = await getToken({ req: context.req });

  const address = token?.sub ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}
```

세션 관리에 대한 자세한 정보는 다음 문서를 참조하십시오:

- [Next.js 인증 가이드](https://nextjs.org/docs/pages/guides/authentication)
- [NextAuth 문서](https://next-auth.js.org)
